<template>
  <el-col>
    <el-form-item :label="`${setI18n('setting.size.label')}：`">
      <xt-radio v-model="font" @change="store.setSize" :options="sizeOptions" />
    </el-form-item>
  </el-col>
</template>

<script lang="ts">
export default {
  name: "SettingSize",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import { useLocalI18n } from "@/locales/i18n";
import { OptionType } from "@/typings";
import useSystemStore from "@/pinia/system";

const sizeOptions: OptionType[] = [
  { name: "小", code: "16", i18n: "setting.size.small" },
  { name: "中", code: "18", i18n: "setting.size.middle" },
  { name: "大", code: "20", i18n: "setting.size.large" },
];

const { setI18n } = useLocalI18n();
const store = useSystemStore();

const font = ref(store.settingSize);
</script>
